<template>
  <el-sub-menu
    v-if="menu.children && menu.children.length > 0"
    :key="menu.path"
    :index="menu.path"
  >
    <template #title>
      <svg-icon :name="menu.meta.icon"></svg-icon>
      <span>{{ getTitle(menu.meta) }}</span>
    </template>
    <menu-item
      v-for="sub in menu.children"
      :key="sub.path"
      :menu="sub"
    ></menu-item>
  </el-sub-menu>
  <el-menu-item
    v-else
    :key="menu.path"
    :index="menu.path"
    :route="{ path: $localePath(menu.path) }"
    @click="onItemClick(menu)"
  >
    <svg-icon :name="menu.meta.icon"></svg-icon>
    <template #title>{{ getTitle(menu.meta) }}</template>
  </el-menu-item>
</template>

<script setup>
import { useI18n } from "#imports";
const { $navigate } = useNuxtApp();

const appStore = useStore.appStore();
const { locale } = useI18n();

defineProps({
  menu: {
    type: Object,
    required: true,
  },
});
const onItemClick = (menu) => {
  console.log('测试一下是否运行到此相互')
  $navigate(menu.path);
};
const getTitle = (meta) => {
  return getLocaleTitle(locale.value, meta);
};
</script>
